<template>
    <div class="container">
        <el-row :gutter="6">
            <el-col :span="6">
                <el-card class="el-card1" :body-style="{ padding: '0px' }">
                    <img :src="baseUrl + 'downLoad?filename=' + user.img" class="image">
                    <div style="padding: 14px;">
                        <div class="dd" style="font-size: 25px; font-weight:600">
                            {{ user.nickName }}
                        </div>
                        <div class="dd" style="font-size:20px; color:#7098da">
                            {{ user.email }}
                        </div>
                        <div class="dd" style="font-size:17px;color:#404b69">
                            {{ user.phone }}
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="18">
                <el-card class="el-card2" style="padding: 0">
                    <div>
                        <el-menu style="margin-top: -20px" @select="handleSelect" :default-active="activeIndex"
                            mode="horizontal">
                            <el-menu-item index="1">修改信息</el-menu-item>
                            <el-menu-item index="2">修改密码</el-menu-item>
                        </el-menu>
                        <div style="margin-top: 30px;">
                            <div v-if="activeIndex == '1'">
                                <el-form style="width:70%" :model="user" :rules="rules" ref="ruleForm"
                                    label-width="77px" class="demo-ruleForm">
                                    <el-form-item label="用户:" prop="username">
                                        <el-input disabled v-model="user.username"></el-input>
                                    </el-form-item>

                                    <el-form-item label="昵称:" prop="nickName">
                                        <el-input v-model="user.nickName"></el-input>
                                    </el-form-item>

                                    <el-form-item label="手机号:" prop="phone">
                                        <el-input v-model="user.phone"></el-input>
                                    </el-form-item>

                                    <el-form-item label="邮箱:" prop="email">
                                        <el-input v-model="user.email"></el-input>
                                    </el-form-item>

                                    <el-form-item label="头像:" prop="img">
                                        <el-upload :action="baseUrl + 'upload'" list-type="picture-card"
                                            :on-remove="handleRemove" :on-success="handleSuccess" :limit="1"
                                            :file-list="fileList">
                                            <i class="el-icon-plus"></i>
                                        </el-upload>
                                    </el-form-item>

                                    <el-form-item>
                                        <el-button type="primary" @click="changeUser">保存</el-button>
                                        <el-button @click="resetForm">重置</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div v-show="activeIndex == '2'">
                                <el-form style="margin-top:60px;width:50%" :model="passwords" :rules="rulesPassword"
                                    ref="passwordForm" label-width="90px" class="demo-ruleForm">
                                    <el-form-item label="原密码:" prop="oldPassword">
                                        <el-input show-password placeholder="请输入原密码"
                                            v-model="passwords.oldPassword"></el-input>
                                    </el-form-item>

                                    <el-form-item label="新密码:" prop="newPassword">
                                        <el-input show-password placeholder="请输入新密码"
                                            v-model="passwords.newPassword"></el-input>
                                    </el-form-item>

                                    <el-form-item label="确认密码:" prop="confirmPassword">
                                        <el-input show-password placeholder="请确认密码"
                                            v-model="passwords.confirmPassword"></el-input>
                                    </el-form-item>

                                    <el-form-item>
                                        <el-button type="primary" @click="changePassword">修改密码</el-button>
                                        <el-button @click="resetPassword">重置</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>

        </el-row>
    </div>
</template>

<script>
import { url } from '@/util/tools';
export default {
    data() {
        let checkOldPassword = (rule, value, callback) => {
            if (this.user.password == value) {
                callback()
            } else {
                callback(new Error('密码错误😒'))
            }
        }
        let checkNewPassword = (rule, value, callback) => {
            let regex = /^[0-9a-zA-z._]{6,}$/
            if (regex.test(value)) {
                callback()
            } else {
                callback(new Error('密码为数字字母._, 长度不小于6😘'))
            }
        }
        let checkConfirmPassword = (rule, value, callback) => {
            if (this.passwords.newPassword == value) {
                callback()
            } else {
                callback(new Error("两次密码输入不同😡"))
            }
        }
        return {
            baseUrl: url,
            user: JSON.parse(localStorage.getItem("userInfo")),
            activeIndex: '1',
            rules: {
                nickName: [
                    { required: true, message: "昵称不能为空", trigger: 'blur' }
                ]
            },
            fileList: [],
            passwords: {
                oldPassword: '',
                newPassword: '',
                confirmPassword: '',
            },
            rulesPassword: {
                oldPassword: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                    {
                        validator: checkOldPassword, trigger: 'blur'
                    }
                ],
                newPassword: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                    {
                        validator: checkNewPassword, trigger: 'blur'
                    }
                ],
                confirmPassword: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                    {
                        validator: checkConfirmPassword, trigger: 'blur'
                    }
                ],
            }
        }
    },
    methods: {
        handleSelect(key, keyPath) {
            if (key == '1') {
                this.activeIndex = '1'
            } else {
                this.activeIndex = '2'
            }
        },
        //头像上传成功
        handleSuccess(res) {
            if (res.status == 200) {
                this.user.img = res.message
            }
        },

        handleRemove(file, fileList) {
            this.user.img = ''
        },

        //修改用户信息
        changeUser() {
            this.fileList = []
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.$http.put('systemuser', this.user)
                        .then(res => {
                            if (res.data.status == 200) {
                                this.$http.post('systemuser/login', this.user)
                                    .then(res => {
                                        if (res.data.status == 200) {
                                            this.user = res.data.data
                                            localStorage.setItem("userInfo", JSON.stringify(this.user))
                                            this.$message({
                                                message: '修改成功😁',
                                                type: 'success'
                                            })

                                            this.fileList = [{
                                                name: this.user.img,
                                                url: this.baseUrl + 'downLoad?filename=' + this.user.img
                                            }]
                                        } else {
                                            this.$message({
                                                message: '修改失败😭',
                                                type: 'error'
                                            })
                                        }
                                    })
                                    .catch(err => {
                                        this.$message({
                                            message: '请求异常',
                                            type: 'error'
                                        })
                                    })
                            } else {
                                this.$message({
                                    message: '修改失败😭',
                                    type: 'error'
                                })
                            }
                        })
                        .catch(err => {
                            this.$message({
                                message: '请求异常',
                                type: 'error'
                            })
                        })
                } else {
                    this.$message({
                        message: '信息有误',
                        type: 'error'
                    })
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.ruleForm.resetFields();
        },
        //修改密码
        changePassword() {
            this.$refs.passwordForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确定修改密码吗, 是否继续😣?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.user.password = this.passwords.newPassword
                        this.$http.put('systemuser', this.user)
                            .then(res => {
                                if (res.data.status == 200) {
                                    this.$message({
                                        message: '修改成功😁',
                                        type: 'success'
                                    })
                                    localStorage.clear()
                                    sessionStorage.clear()
                                    this.$router.push('/login')
                                } else {
                                    this.$message({
                                        message: '修改失败',
                                        type: 'error'
                                    })
                                }
                            })
                            .catch(err => {
                                this.$message({
                                    message: '请求异常',
                                    type: 'error'
                                })
                            })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                } else {
                    this.$message({
                        message: '数据有误',
                        type: 'error'
                    })
                    return false;
                }
            });
        },
        resetPassword() {
            this.$refs.passwordForm.resetFields()
        }

    },
    mounted() {
        this.user = JSON.parse(localStorage.getItem("userInfo"))
        // console.log(this.user)
        this.fileList = [
            { name: this.user.img, url: this.baseUrl + 'downLoad?filename=' + this.user.img }
        ]
    }
}
</script>

<style scoped>
.image {
    width: 170px;
    height: 170px;
}

.el-card1 {
    height: 100vh;
    text-align: center;
    padding-top: 20%;
    box-sizing: border-box
}

.el-card2 {
    height: 100vh;
}

.el-form {
    width: 80%;
    margin: 0 auto;
}

.dd {
    margin-bottom: 10px;
}
</style>